<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="queryForm" :model="dgPageParams" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="门店" prop="storeId">
                <el-select
                  v-model="dgPageParams.storeId"
                  placeholder="请选择"
                  class="w-200"
                  filterable
                >
                  <el-option
                    v-for="(item, index) in StoreList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <!-- 业绩任务 -->
    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">门店斗拱配置</div>
        <div class="op_right">
          <button class="primary_button" @click="handleAddTask">
            新增斗拱配置
          </button>
          <button class="primary_button" @click="handleImport('zz')">
            导入转账
          </button>
          <button class="primary_button" @click="DownloadTemplate('zz')">
            下载转账模板
          </button>

          <button class="primary_button" @click="handleImport('tx')">
            导入提现
          </button>
          <button class="primary_button" @click="DownloadTemplate('tx')">
            下载提现模板
          </button>

          <button class="primary_button" @click="handleImport('zb')">
            导入转账总部
          </button>
          <button class="primary_button" @click="DownloadTemplate('zb')">
            转账总部模板
          </button>
        </div>
      </div>

      <div class="table_list">
        <el-table :data="dgPageData" stripe style="width: 100%">
          <el-table-column prop="storeName" label="门店名称" width="160">
          </el-table-column>
          <el-table-column prop="dgMerchant" label="斗拱商户号">
          </el-table-column>
          <el-table-column prop="dgMerchantName" label="斗拱商户名称">
          </el-table-column>
          <el-table-column prop="dgMerchantPrivate" label="斗拱商户私钥">
          </el-table-column>
          <el-table-column prop="dgMerchantPublic" label="斗拱商户公钥">
          </el-table-column>
          <el-table-column prop="dgPublic" label="汇付公钥"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150px">
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="EditData(scope.row)"
                >编辑</el-button
              >
              <el-button size="mini" type="text" @click="DeleteData(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <el-dialog
        :title="title"
        :visible.sync="CancleQuashVisible"
        width="600px"
        :before-close="dgCancle"
      >
        <span>
          <el-form
            :model="dgPageForm"
            :rules="dgPageRules"
            ref="dgPageForm"
            label-width="120px"
            class="no-dialog-padding"
          >
            <el-row>
              <el-col>
                <el-form-item label="门店" prop="storeId">
                  <el-select
                    v-model="dgPageForm.storeId"
                    placeholder="请选择"
                    class="w-100"
                    filterable
                    v-if="!dgPageForm.dgId"
                  >
                    <el-option
                      v-for="(item, index) in StoreList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    v-model="dgPageForm.storeName"
                    placeholder="请输入"
                    v-if="!!dgPageForm.dgId"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="斗拱商户号" prop="dgMerchant">
                  <el-input
                    v-model="dgPageForm.dgMerchant"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="斗拱商户名称" prop="dgMerchantName">
                  <el-input
                    v-model="dgPageForm.dgMerchantName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="斗拱商户私钥" prop="dgMerchantPrivate">
                  <el-input
                    v-model="dgPageForm.dgMerchantPrivate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="斗拱商户公钥" prop="dgMerchantPublic">
                  <el-input
                    v-model="dgPageForm.dgMerchantPublic"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="汇付公钥" prop="dgPublic">
                  <el-input
                    v-model="dgPageForm.dgPublic"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dgCancle">取 消</el-button>
          <el-button
            type="primary"
            @click="CancleQuashSubmit"
            :loading="RaskLoading"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <el-dialog
        :title="upload.title"
        :visible.sync="upload.open"
        width="400px"
        append-to-body
      >
        <div v-loading="timeSetLoading || upload.isUploading">
          <el-upload
            ref="upload"
            :limit="1"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :on-error="handleFileError"
            :auto-upload="false"
            name="file"
            :data="{}"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>

            <div class="el-upload__tip" slot="tip"></div>
          </el-upload>

          <div class="model-height">
            <el-form
              ref="uploadForm"
              size="mini"
              label-width="90px"
              :model="uploadForm"
              :rules="uploadRules"
              @submit.native.prevent
            >
              <!-- <el-form-item label="月份" prop="moon">
                  <el-date-picker
                    class="w-100"
                    v-model="uploadForm.moon"
                    type="month"
                    placeholder="选择月"
                    value-format="yyyy-MM"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="是否修改" prop="editStatus">
                  <div class="max-width-300">
                    <el-radio-group v-model="uploadForm.editStatus">
                      <el-radio label="N">新增</el-radio>
                      <el-radio label="Y">修改</el-radio>
                    </el-radio-group>
                  </div>
                </el-form-item> -->
            </el-form>
          </div>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            :loading="timeSetLoading || upload.isUploading"
            @click="submitFileForm"
            >确 定</el-button
          >
          <el-button @click="uploadClose">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 进度条 -->
      <el-dialog
        title="进度"
        :visible.sync="ProcessdialogVisible"
        width="30%"
        :before-close="ProcessClose"
      >
        <span>
          <el-progress :percentage="percentage"></el-progress>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getdgPage,
  CreatedgPage,
  UpdatedgPage,
  DeletedgPage,
  getdgPageInfo,
  getAllStorelists,
  downloadTransferTemp,
  impCashTemp,
  impManagerTemp,
  impFinishDown,
  impFinish,
  impCashFinish,
  impCashFinishDown,
  impManagerFinishDown,
  impManagerFinish,
} from "@/api/business/dgPages";
import { getBaseHeader } from "@/utils/request";

export default {
  name: "EryuoaStoredgPages",

  data() {
    return {
      StoreList: [], // 查询所有门店
      RaskLoading: false,
      CancleQuashVisible: false,
      dgPageForm: {
        dgId: "", // 斗拱配置ID
        dgMerchant: "", // 斗拱商户号
        dgMerchantName: "", // 斗拱商户名称
        dgMerchantPrivate: "", // 斗拱商户私钥
        dgMerchantPublic: "", // 斗拱商户公钥
        dgProductId: "", // 斗拱产品标识
        dgPublic: "", // 汇付公钥
        dgSystemId: "", // 斗拱系统id
        storeId: "", // 门店标识
      },

      dgPageParams: {
        taskId: "",
        pageNo: 1,
        pageSize: 10,
      },

      dgPageData: [],
      dgPageRules: {
        storeId: [{ required: true, message: "请选择门店", trigger: "change" }],
        dgMerchant: [{ required: true, message: "请输入", trigger: "blur" }],
        dgMerchantName: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        dgMerchantPrivate: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        dgMerchantPublic: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        dgPublic: [{ required: true, message: "请输入", trigger: "change" }],
      },

      loading: false,

      taskData: [], // 项目列表数据
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        storeId: "",
      },

      taskStatusOptions: [
        {
          value: "F",
          label: "已确定",
        },
        {
          value: "W",
          label: "待确定",
        },
        {
          value: "C",
          label: "取消",
        },
      ],
      total: 0,
      dgPageTotal: 0,
      title: "",

      title: "",
      // 遮罩层
      loading: false,
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: getBaseHeader(),

        // 上传的地址
        url: "",
      },

      UploadType: "",

      timeSetLoading: false,
      uploadForm: {
        // moon: "",
        // editStatus: "N",
      },
      uploadRules: {
        // moon: [{ required: true, message: "请选择月份", trigger: "change" }],
      },
      LoadingIcon: false,
      percentage: 0,
      ProcessdialogVisible: false,
      Process: null,
    };
  },

  created() {
    this.getList();
    this.getAllStoreData();
  },

  mounted() {},

  methods: {
    // 编辑
    EditData(row) {
      this.CancleQuashVisible = true;
      this.title = "编辑门店斗拱配置";
      this.dgPageParams.dgId = row.dgId;
      this.dgPageParams.pageNo = 1;
      this.getdgPageInfoData(row.dgId);
    },

    // 删除
    DeleteData(row) {
      this.$confirm("确认要删除该条门店斗拱配置数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeletedgPage({
            dgId: row.dgId,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getList();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              }
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },

    dgCancle() {
      this.CancleQuashVisible = false;
      this.dgPageForm.dgId = "";
      this.resetFormData("dgPageForm");
    },

    CancleQuashSubmit() {
      this.RaskLoading = true;
      this.$refs["dgPageForm"].validate((valid) => {
        if (valid) {
          if (!this.dgPageForm.dgId) {
            this.CreatedgPageData();
          } else {
            this.UpdatedgPageData();
          }
        } else {
          return false;
        }
      });
    },

    // 查询所有门店接口
    getAllStoreData() {
      getAllStorelists({ storeDg: "N" })
        .then((res) => {
          // console.log(res, "查询所有门店接口");

          const { code, data } = res;
          if (code === 0) {
            this.StoreList = data;
          }
        })
        .catch((err) => {});
    },

    // 详情
    getdgPageInfoData(dgId) {
      getdgPageInfo({ dgId: dgId })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            // this.dgPageForm.storeId = data.storeId;
            this.dgPageForm.storeName = data.storeName;
            this.dgPageForm.dgId = data.dgId;
            this.dgPageForm.dgMerchant = data.dgMerchant;
            this.dgPageForm.dgMerchantName = data.dgMerchantName;
            this.dgPageForm.dgMerchantPrivate = data.dgMerchantPrivate;
            this.dgPageForm.dgMerchantPublic = data.dgMerchantPublic;
            this.dgPageForm.dgProductId = data.dgProductId;
            this.dgPageForm.dgPublic = data.dgPublic;
            this.dgPageForm.dgSystemId = data.dgSystemId;
            this.dgPageForm.taskTurnover = data.taskTurnover;
          }
        })
        .catch((err) => {});
    },

    // 新增
    CreatedgPageData() {
      this.RaskLoading = true;
      CreatedgPage(this.dgPageForm)
        .then((res) => {
          this.RaskLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
            this.dgCancle();
          }
        })
        .catch((err) => {
          this.RaskLoading = false;
        });
    },

    // 编辑
    UpdatedgPageData() {
      this.RaskLoading = true;
      UpdatedgPage(this.dgPageForm)
        .then((res) => {
          this.RaskLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
            this.dgCancle();
          }
        })
        .catch((err) => {
          this.RaskLoading = false;
        });
    },

    // 门店斗拱配置
    getList() {
      this.loading = true;

      getdgPage(this.dgPageParams)
        .then((res) => {
          console.log(res, "门店斗拱配置");
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.dgPageData = data.list;
            this.dgPageTotal = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },

    handleAddTask() {
      this.CancleQuashVisible = true;
      this.dgPageParams.dgId = "";
      this.title = "新增门店斗拱配置";
    },

    ProcessClose() {
      clearTimeout(this.Process);
      this.ProcessdialogVisible = false;
    },

    uploadClose() {
      // 关闭弹窗
      this.upload.open = false;
      // 重置上传状态和文件
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();

      this.uploadForm.moon = "";
      this.uploadForm.editStatus = "N";
    },

    // 提交上传文件
    submitFileForm() {
      this.$refs["uploadForm"].validate((valid) => {
        if (valid) {
          // const { moon, editStatus } = this.uploadForm;

          this.$nextTick(() => {
            this.LoadingIcon = this.$loading({
              lock: true,
              text: "数据导入中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            this.$refs.upload.submit();
          });

          this.percentage = 0;
          this.ProcessdialogVisible = true;
          this.Process = setInterval(() => {
            this.percentage += 1;
            if (this.percentage >= 99) {
              clearTimeout(this.Process);
            }
          }, 1000);
        }
      });
    },

    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log(response, "response676712121");

      if (response.code !== 0) {
        this.LoadingIcon.close();
        this.ProcessClose();
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();

        this.$modal.msgError(response.msg);
        return;
      }

      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();

      this.timeSet = setInterval(() => {
        if (!this.timeSetLoading) {
          this.cx(response.data);
        }
      }, 1000);
    },

    handleFileError() {
      console.log("失败qwqw");
      this.LoadingIcon.close();
    },

    cx(token) {
      if (this.UploadType === "zz") {
        this.timeSetLoading = true;
        impFinish(
          {
            token,
          }
            .then((response) => {
              this.timeSetLoading = false;
              const { code, data } = response;
              if (code === 0) {
                if (data === "Y") {
                  this.getList();
                  clearInterval(this.timeSet);
                  this.$alert("", "导入结果" + response.msg);
                  this.ProcessClose();
                  this.getimpFinishDown(token);
                  this.LoadingIcon.close();
                }
              } else {
                clearInterval(this.timeSet);
                this.$alert("", "导入结果" + response.msg);
                this.ProcessClose();
              }
            })
            .catch((e) => {
              this.timeSetLoading = false;
              clearInterval(this.timeSet);
              this.$alert("", "导入结果" + e.msg);
              this.ProcessClose();
            })
        );
      } else if (this.UploadType === "tx") {
        this.timeSetLoading = true;
        impCashFinish({
          token,
        })
          .then((response) => {
            this.timeSetLoading = false;
            const { code, data } = response;
            if (code === 0) {
              if (data === "Y") {
                this.getList();
                clearInterval(this.timeSet);
                this.$alert("", "导入结果" + response.msg);
                this.ProcessClose();
                this.getimpFinishDown(token);
                this.LoadingIcon.close();
              }
            } else {
              clearInterval(this.timeSet);
              this.$alert("", "导入结果" + response.msg);
              this.ProcessClose();
            }
          })
          .catch((e) => {
            this.timeSetLoading = false;
            clearInterval(this.timeSet);
            this.$alert("", "导入结果" + e.msg);
            this.ProcessClose();
          });
      } else if (this.UploadType === "zb") {
        this.timeSetLoading = true;
        impManagerFinish({
          token,
        })
          .then((response) => {
            this.timeSetLoading = false;
            const { code, data } = response;
            if (code === 0) {
              if (data === "Y") {
                this.getList();
                clearInterval(this.timeSet);
                this.$alert("", "导入结果" + response.msg);
                this.ProcessClose();
                this.getimpFinishDown(token);
                this.LoadingIcon.close();
              }
            } else {
              clearInterval(this.timeSet);
              this.$alert("", "导入结果" + response.msg);
              this.ProcessClose();
            }
          })
          .catch((e) => {
            this.timeSetLoading = false;
            clearInterval(this.timeSet);
            this.$alert("", "导入结果" + e.msg);
            this.ProcessClose();
          });
      }
    },

    getimpFinishDown(token) {
      if (this.UploadType === "zz") {
        impFinishDown({
          token,
        })
          .then((response) => {
            this.$download.excel(response, "导入结果.xls");
          })
          .catch(() => {});
      } else if (this.UploadType === "tx") {
        impCashFinishDown({
          token,
        })
          .then((response) => {
            this.$download.excel(response, "导入结果.xls");
          })
          .catch(() => {});
      } else if (this.UploadType === "zb") {
        impManagerFinishDown({
          token,
        })
          .then((response) => {
            this.$download.excel(response, "导入结果.xls");
          })
          .catch(() => {});
      }
    },

    /** 导入按钮操作 */
    handleImport(type) {
      this.UploadType = type;
      if (type === "zz") {
        // 导入转账
        this.upload.title = "导入转账";

        this.upload.url =
          process.env.VUE_APP_BASE_API +
          "/admin-api/order/dg-record/transfer/import";
      } else if (type === "tx") {
        // 导入提现
        this.upload.title = "导入提现";

        this.upload.url =
          process.env.VUE_APP_BASE_API +
          "/admin-api/order/dg-record/cash/import";
      } else if (type === "zb") {
        // 导入转账总部
        this.upload.title = "导入转账总部";

        this.upload.url =
          process.env.VUE_APP_BASE_API +
          "/admin-api/order/dg-record/manager/import";
      }
      this.upload.open = true;
    },

    DownloadTemplate(type) {
      if (this.UploadType === "zz") {
        downloadTransferTemp()
          .then((response) => {
            this.$download.excel(response, "下载转账导入模板.xls");
            this.$message({
              type: "success",
              message: "操作成功",
            });
          })
          .catch((err) => {});
      } else if (type === "tx") {
        impCashTemp()
          .then((response) => {
            this.$download.excel(response, "下载提现导入模板.xls");
            this.$message({
              type: "success",
              message: "操作成功",
            });
          })
          .catch((err) => {});
      } else if (type === "zb") {
        impManagerTemp()
          .then((response) => {
            this.$download.excel(response, "下载转账总部导入模板.xls");
            this.$message({
              type: "success",
              message: "操作成功",
            });
          })
          .catch((err) => {});
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}

.check {
  font-size: 12px;
  color: #0052d9;
}

.list_Stores {
  height: 200px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  .list_Stores_item {
    height: 46px;
    line-height: 46px;
    background: #ffffff;
    padding-left: 47px;
    border-bottom: 1px solid #e7e7e7;
  }
}
</style>
